{% extends "dashboard.html" %}

{% block title %} Bayanihan: Submit a Report {% endblock %}

{% block nav-validate %} class="nav-active" {% endblock %} 
{% block nav-home %}{% endblock %} 

{% block js %}
	<script type="text/javascript" src="{{MEDIA_URL}}js/OpenLayers.js"></script>
	<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/validate_reports.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	{% block map_operations %}
		<script src="{{MEDIA_URL}}js/jquery-ui.min.js"></script>
		<script src="{{MEDIA_URL}}js/jquery-ui-timepicker-addon.js"></script>
		
		<script type="text/javascript">
			$(document).ready( function(){
				init(); 
			})
			
		</script>
	{% endblock %}
{% endblock %}

{% block css %} 
	<link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/submit.css" />
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <style>
        #form{
            width: 890px;
        }
        
        .report_row{
            width: 200px;
        }
        
        #treshold div, #rating div{
            float:left;
            margin-right: 30px;
        }
        .report{
            margin: 5px 0;
            border: 1px solid #cccccc;
            padding: 10px;
        }

        div:hover.report{
            background-color: #D3CFC5;
            cursor: pointer;
        }
        
        #details{
            display: none;
        }
        
        h3{
            margin: 8px 0;
            border-bottom: 1px solid #cccccc;
        }
        
        div:hover.report h3{
            border-bottom: 1px solid #fff;
        }
        
        select{
            margin-bottom: 8px;
        }
        
        .gen_desc{
            float:left;
            width: 400px;
        } 
        
        .validation_desc{
            width: 400px;
            float:left;
        }
        
        .rating_field{
            width: 50px;
            float:left;
        }
        
        .rating{
            display:block;
            font-size:20px;
            color: #dd3c10; 
            margin-top: 5px;
        }
    </style>
{% endblock %}

{% block content %}
	<div id="form">
        <h3>Deployment</h3>
        <div class="report_row">
            <select name="deployment_name" id="deployment_name">
                    <option>Select deployment</option>
                    {% for x in deployments %}
                        <option>{{x}}</option>
                    {% endfor %}
            </select>
        </div>
        <h3>Threshold</h3>
        <div id="treshold">
            <div class="report_row">
                <h4>Radius (meters)</h4>
                <input type="text" name="radius" id="radius" />
            </div>
            <div class="report_row">
                <h4>Time (days)</h4>
                <input type="text" name="time" id="time" />
            </div>
        </div>
        <div style="clear:left"></div>
        <h3>Rating</h3>
        <div id="rating">
            <div class="report_row">
                <h4>Space difference (%)</h4>
                <input type="text" name="space_diff" id="space_diff" />
            </div>
            <div class="report_row">
                <h4>Time difference (%)</h4>
                <input type="text" name="time_diff" id="time_diff" />
            </div>
            <div class="report_row">
                <h4>Index difference (%)</h4>
                <input type="text" name="index_diff" id="index_diff" />
            </div>
        </div>
        <div style="clear:left"></div>
        <div class="report_row">
            <input class ="btn_submit" type="submit" name="submit" id="submit" value="Update"></input>
        </div>
        <div id="reports">
                
        </div>
	</div> 
    <div class='clear'></div>
    <script type="text/javascript">
        $('#deployment_name').change(function(){
            deployment_id = $(this).val();
            
            $.get("/features/", { 
                deployment_id: deployment_id
            }, function(data) {
                dict = jQuery.parseJSON(data);
                collection = dict[deployment_id]
                add_layer(deployment_id);
                add_reports(collection);
            });
        });
        
        $('#submit').click(function(){
            radius = $('#radius').val();
            time_max = $('#time').val();
            space_percentage = $('#space_diff').val();
            time_percentage = $('#time_diff').val();
            index_percentage = $('#index_diff').val();
            validate_reports();
            display_reports();
        });
    </script>
                
{% endblock %}